import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Index() {
  useEffect(() => {
    console.log('useEffect ==> 我是首页');
    return () => {
      console.log('useEffect ==> 离开首页');
    }
  }, [])
  return <h2>首页</h2>;
}

function List() {
  useEffect(() => {
    console.log('useEffect ==> 我是列表页');
    return () => {
      console.log('useEffect ==> 离开列表页');
    }
  })
  return <h2>列表</h2>;
}

function App() {
  /* 
    React Hooks 不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序
    第一个参数 count => 当前的状态值
    第二个参数 setCount => 改变状态值的方法函数
  */
  const [count, setCount] = useState(0);
  /* 
    首次渲染(componentDidMonut) 和 更新之后重新渲染(componentDidUpdate) 都会调用
    useEffect 中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，
    而 componentDidMonut和 componentDidUpdate 中的代码都是同步执行的
    第二个参数：(可以实现 componentWillUnmount 效果)
      是一个数组，当里面的状态值发生改变时，才会进行解绑
      当传入空数组时，就是当组件销毁时才进行解绑
  */
  useEffect(() => {
    console.log(`useEffect ==> ${count}`);
  },[count]);

  return (
    <>
      <p>你点击了 {count} 次</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点击
      </button>

      {/* 路由 */}
      <Router>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/list">列表</Link>
          </li>
        </ul>
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/list" element={<List />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;
